<template>
  <div class="context-aware-nav-system">
    <!-- 顶部智能导航 -->
    <div class="smart-header">
      <div class="header-brand">
        <el-icon><Grid /></el-icon>
        <span>智能ERP导航</span>
      </div>
      
      <div class="smart-search">
        <el-input
          v-model="smartSearchQuery"
          placeholder="智能搜索功能、数据、操作..."
          @input="handleSmartSearch"
          @focus="showSearchSuggestions = true"
          @blur="hideSearchSuggestions"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
          <template #suffix>
            <el-button text @click="toggleVoiceSearch" :class="{ 'voice-active': isVoiceSearching }">
              <el-icon><Microphone /></el-icon>
            </el-button>
          </template>
        </el-input>
        
        <!-- 智能搜索建议 -->
        <transition name="suggestions-slide">
          <div v-if="showSearchSuggestions && searchSuggestions.length > 0" class="search-suggestions">
            <div
              v-for="suggestion in searchSuggestions"
              :key="suggestion.id"
              class="suggestion-item"
              @click="selectSuggestion(suggestion)"
            >
              <el-icon><component :is="suggestion.icon" /></el-icon>
              <div class="suggestion-content">
                <div class="suggestion-title">{{ suggestion.title }}</div>
                <div class="suggestion-desc">{{ suggestion.description }}</div>
              </div>
              <div class="suggestion-badge" v-if="suggestion.badge">
                <el-tag size="small" :type="suggestion.badgeType">{{ suggestion.badge }}</el-tag>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <div class="header-actions">
        <el-button text @click="toggleAIAssistant">
          <el-icon><MagicStick /></el-icon>
          AI助手
        </el-button>
        <el-button text @click="toggleNotifications">
          <el-icon><Bell /></el-icon>
          <el-badge :value="5" class="notification-badge" />
        </el-button>
        <el-button text @click="toggleUserMenu">
          <el-icon><User /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧上下文面板 -->
      <div class="context-panel" :class="{ 'collapsed': isContextPanelCollapsed }">
        <div class="panel-header">
          <h3>智能推荐</h3>
          <el-button text @click="toggleContextPanel">
            <el-icon><component :is="isContextPanelCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>

        <div class="panel-content">
          <!-- 当前上下文 -->
          <div class="current-context">
            <h4>当前上下文</h4>
            <div class="context-info">
              <div class="context-item">
                <el-icon><component :is="currentContext.icon" /></el-icon>
                <span>{{ currentContext.title }}</span>
              </div>
              <div class="context-desc">{{ currentContext.description }}</div>
            </div>
          </div>

          <!-- 智能推荐 -->
          <div class="smart-recommendations">
            <h4>智能推荐</h4>
            <div class="recommendation-list">
              <div
                v-for="recommendation in smartRecommendations"
                :key="recommendation.id"
                class="recommendation-item"
                :class="{ 'high-priority': recommendation.priority === 'high' }"
                @click="selectRecommendation(recommendation)"
              >
                <div class="recommendation-icon">
                  <el-icon><component :is="recommendation.icon" /></el-icon>
                </div>
                <div class="recommendation-content">
                  <div class="recommendation-title">{{ recommendation.title }}</div>
                  <div class="recommendation-desc">{{ recommendation.description }}</div>
                  <div class="recommendation-reason">{{ recommendation.reason }}</div>
                </div>
                <div class="recommendation-badge">
                  <el-tag size="small" :type="recommendation.priorityType">
                    {{ recommendation.priorityText }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 相关功能 -->
          <div class="related-functions">
            <h4>相关功能</h4>
            <div class="function-list">
              <div
                v-for="func in relatedFunctions"
                :key="func.id"
                class="function-item"
                @click="openFunction(func)"
              >
                <el-icon><component :is="func.icon" /></el-icon>
                <span>{{ func.name }}</span>
                <el-badge v-if="func.count" :value="func.count" class="function-badge" />
              </div>
            </div>
          </div>

          <!-- 学习模式 -->
          <div class="learning-mode">
            <h4>学习模式</h4>
            <div class="learning-stats">
              <div class="stat-item">
                <div class="stat-value">{{ learningStats.accuracy }}%</div>
                <div class="stat-label">推荐准确率</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ learningStats.improvements }}</div>
                <div class="stat-label">改进建议</div>
              </div>
            </div>
            <el-button size="small" @click="improveRecommendations">
              <el-icon><TrendCharts /></el-icon>
              优化推荐
            </el-button>
          </div>
        </div>
      </div>

      <!-- 中间工作区域 -->
      <div class="work-area">
        <!-- 工作区头部 -->
        <div class="work-header">
          <div class="work-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="crumb in workBreadcrumbs" :key="crumb.path">
                <el-icon v-if="crumb.icon"><component :is="crumb.icon" /></el-icon>
                {{ crumb.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="work-actions">
            <el-button size="small" @click="refreshWorkArea">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button size="small" @click="toggleContextMode">
              <el-icon><component :is="contextMode === 'smart' ? 'MagicStick' : 'Grid'" /></el-icon>
              {{ contextMode === 'smart' ? '智能模式' : '传统模式' }}
            </el-button>
          </div>
        </div>

        <!-- 工作区内容 -->
        <div class="work-content">
          <!-- 智能工作台 -->
          <div class="smart-workspace">
            <!-- 上下文感知卡片 -->
            <div class="context-cards">
              <div
                v-for="card in contextCards"
                :key="card.id"
                class="context-card"
                :class="{ 'active': activeCard === card.id }"
                @click="selectCard(card)"
              >
                <div class="card-header">
                  <el-icon><component :is="card.icon" /></el-icon>
                  <h4>{{ card.title }}</h4>
                  <el-tag v-if="card.badge" size="small" :type="card.badgeType">
                    {{ card.badge }}
                  </el-tag>
                </div>
                <div class="card-content">
                  <p>{{ card.description }}</p>
                  <div class="card-meta">
                    <span class="card-time">{{ card.updateTime }}</span>
                    <span class="card-relevance">相关度: {{ card.relevance }}%</span>
                  </div>
                </div>
                <div class="card-actions">
                  <el-button size="small" @click.stop="openCard(card)">
                    打开
                  </el-button>
                  <el-button size="small" text @click.stop="bookmarkCard(card)">
                    <el-icon><Star /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 智能数据流 -->
            <div class="data-flow">
              <h3>智能数据流</h3>
              <div class="flow-container">
                <div
                  v-for="flow in dataFlows"
                  :key="flow.id"
                  class="flow-item"
                  :class="{ 'active': flow.active }"
                  @click="toggleFlow(flow)"
                >
                  <div class="flow-icon">
                    <el-icon><component :is="flow.icon" /></el-icon>
                  </div>
                  <div class="flow-content">
                    <div class="flow-title">{{ flow.title }}</div>
                    <div class="flow-status">{{ flow.status }}</div>
                  </div>
                  <div class="flow-indicator">
                    <el-icon v-if="flow.active"><Check /></el-icon>
                    <el-icon v-else><Close /></el-icon>
                  </div>
                </div>
              </div>
            </div>

            <!-- 预测分析 -->
            <div class="predictive-analysis">
              <h3>预测分析</h3>
              <div class="analysis-grid">
                <div
                  v-for="analysis in predictiveAnalyses"
                  :key="analysis.id"
                  class="analysis-card"
                >
                  <div class="analysis-header">
                    <el-icon><component :is="analysis.icon" /></el-icon>
                    <span>{{ analysis.title }}</span>
                  </div>
                  <div class="analysis-content">
                    <div class="analysis-value">{{ analysis.value }}</div>
                    <div class="analysis-trend" :class="analysis.trendType">
                      <el-icon><component :is="analysis.trendIcon" /></el-icon>
                      <span>{{ analysis.trend }}</span>
                    </div>
                  </div>
                  <div class="analysis-prediction">
                    <div class="prediction-label">预测:</div>
                    <div class="prediction-value">{{ analysis.prediction }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧AI助手面板 -->
      <div class="ai-panel" :class="{ 'collapsed': isAIPanelCollapsed }">
        <div class="panel-header">
          <h3>AI助手</h3>
          <el-button text @click="toggleAIPanel">
            <el-icon><component :is="isAIPanelCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>

        <div class="panel-content">
          <!-- AI对话 -->
          <div class="ai-chat">
            <div class="chat-messages" ref="chatMessagesRef">
              <div
                v-for="message in aiMessages"
                :key="message.id"
                class="chat-message"
                :class="message.type"
              >
                <div class="message-avatar">
                  <el-icon v-if="message.type === 'assistant'"><MagicStick /></el-icon>
                  <el-icon v-else><User /></el-icon>
                </div>
                <div class="message-content">
                  <div class="message-text">{{ message.text }}</div>
                  <div class="message-time">{{ message.time }}</div>
                </div>
              </div>
            </div>
            <div class="chat-input">
              <el-input
                v-model="chatInput"
                placeholder="输入消息..."
                @keyup.enter="sendMessage"
              >
                <template #suffix>
                  <el-button text @click="sendMessage" :disabled="!chatInput.trim()">
                    <el-icon><Promotion /></el-icon>
                  </el-button>
                </template>
              </el-input>
            </div>
          </div>

          <!-- AI建议 -->
          <div class="ai-suggestions">
            <h4>AI建议</h4>
            <div class="suggestion-list">
              <div
                v-for="suggestion in aiSuggestions"
                :key="suggestion.id"
                class="suggestion-item"
                @click="applySuggestion(suggestion)"
              >
                <el-icon><component :is="suggestion.icon" /></el-icon>
                <span>{{ suggestion.text }}</span>
              </div>
            </div>
          </div>

          <!-- 智能洞察 -->
          <div class="smart-insights">
            <h4>智能洞察</h4>
            <div class="insight-list">
              <div
                v-for="insight in smartInsights"
                :key="insight.id"
                class="insight-item"
              >
                <div class="insight-icon">
                  <el-icon><component :is="insight.icon" /></el-icon>
                </div>
                <div class="insight-content">
                  <div class="insight-title">{{ insight.title }}</div>
                  <div class="insight-desc">{{ insight.description }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI助手弹窗 -->
    <transition name="ai-slide">
      <div v-if="showAIAssistant" class="ai-assistant-modal">
        <div class="modal-header">
          <h3>AI智能助手</h3>
          <el-button text @click="closeAIAssistant">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <div class="modal-content">
          <div class="ai-capabilities">
            <h4>AI能力</h4>
            <div class="capability-list">
              <div
                v-for="capability in aiCapabilities"
                :key="capability.id"
                class="capability-item"
              >
                <el-icon><component :is="capability.icon" /></el-icon>
                <span>{{ capability.name }}</span>
              </div>
            </div>
          </div>
          <div class="ai-actions">
            <el-button @click="askAIQuestion">提问AI</el-button>
            <el-button @click="getAIAnalysis">获取分析</el-button>
            <el-button @click="requestAIOptimization">请求优化</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, Search, Microphone, MagicStick, Bell, User, Expand, Fold,
  Refresh, Star, Check, Close, Promotion, TrendCharts, ShoppingCart,
  ShoppingBag, Warehouse, Money, UserFilled, Setting, Document, List,
  DataBoard, User as UserIcon, Plus, Edit, Delete, Warning, InfoFilled
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const smartSearchQuery = ref('')
const showSearchSuggestions = ref(false)
const isContextPanelCollapsed = ref(false)
const isAIPanelCollapsed = ref(false)
const showAIAssistant = ref(false)
const contextMode = ref('smart')
const activeCard = ref('')
const isVoiceSearching = ref(false)
const chatInput = ref('')
const chatMessagesRef = ref(null)

// 当前上下文
const currentContext = ref({
  title: '销售订单管理',
  description: '正在处理销售订单相关操作',
  icon: 'ShoppingCart'
})

// 智能推荐数据
const smartRecommendations = ref([
  {
    id: 'rec-1',
    title: '客户信息更新',
    description: '基于当前订单，建议更新客户信息',
    reason: '客户联系方式已变更',
    icon: 'User',
    priority: 'high',
    priorityType: 'danger',
    priorityText: '高优先级'
  },
  {
    id: 'rec-2',
    title: '库存检查',
    description: '检查相关产品的库存情况',
    reason: '订单中产品库存不足',
    icon: 'Warehouse',
    priority: 'medium',
    priorityType: 'warning',
    priorityText: '中优先级'
  },
  {
    id: 'rec-3',
    title: '价格审核',
    description: '审核订单价格是否符合政策',
    reason: '价格超出正常范围',
    icon: 'Money',
    priority: 'low',
    priorityType: 'info',
    priorityText: '低优先级'
  }
])

// 相关功能数据
const relatedFunctions = ref([
  { id: 'customer-mgmt', name: '客户管理', icon: 'User', count: 0 },
  { id: 'inventory-check', name: '库存查询', icon: 'Warehouse', count: 0 },
  { id: 'price-analysis', name: '价格分析', icon: 'Money', count: 0 },
  { id: 'order-tracking', name: '订单跟踪', icon: 'Document', count: 0 }
])

// 学习统计
const learningStats = ref({
  accuracy: 87,
  improvements: 3
})

// 搜索建议
const searchSuggestions = ref([])

// 上下文卡片
const contextCards = ref([
  {
    id: 'card-1',
    title: '销售订单 #SO-001',
    description: '客户张三的销售订单，金额¥12,500',
    icon: 'Document',
    updateTime: '2分钟前',
    relevance: 95,
    badge: 'HOT',
    badgeType: 'danger'
  },
  {
    id: 'card-2',
    title: '客户信息 - 张三',
    description: '客户联系方式已更新',
    icon: 'User',
    updateTime: '5分钟前',
    relevance: 88,
    badge: 'NEW',
    badgeType: 'success'
  },
  {
    id: 'card-3',
    title: '库存预警',
    description: '产品A库存不足，需要补货',
    icon: 'Warning',
    updateTime: '10分钟前',
    relevance: 82,
    badge: 'ALERT',
    badgeType: 'warning'
  }
])

// 数据流
const dataFlows = ref([
  {
    id: 'flow-1',
    title: '订单数据流',
    status: '活跃',
    icon: 'Document',
    active: true
  },
  {
    id: 'flow-2',
    title: '客户数据流',
    status: '正常',
    icon: 'User',
    active: false
  },
  {
    id: 'flow-3',
    title: '库存数据流',
    status: '异常',
    icon: 'Warehouse',
    active: false
  }
])

// 预测分析
const predictiveAnalyses = ref([
  {
    id: 'analysis-1',
    title: '销售预测',
    value: '¥2,345,678',
    trend: '+12%',
    trendType: 'positive',
    trendIcon: 'TrendCharts',
    prediction: '下月增长15%',
    icon: 'Money'
  },
  {
    id: 'analysis-2',
    title: '客户增长',
    value: '1,234',
    trend: '+8%',
    trendType: 'positive',
    trendIcon: 'TrendCharts',
    prediction: '下月新增200客户',
    icon: 'User'
  },
  {
    id: 'analysis-3',
    title: '库存周转',
    value: '15.6',
    trend: '-3%',
    trendType: 'negative',
    trendIcon: 'TrendCharts',
    prediction: '需要优化库存',
    icon: 'Warehouse'
  }
])

// AI消息
const aiMessages = ref([
  {
    id: 1,
    type: 'assistant',
    text: '您好！我是您的AI助手，可以帮您分析数据、优化流程、回答问题。有什么需要帮助的吗？',
    time: '刚刚'
  }
])

// AI建议
const aiSuggestions = ref([
  { id: 'sug-1', text: '优化销售流程', icon: 'TrendCharts' },
  { id: 'sug-2', text: '检查库存预警', icon: 'Warning' },
  { id: 'sug-3', text: '分析客户行为', icon: 'DataBoard' }
])

// 智能洞察
const smartInsights = ref([
  {
    id: 'insight-1',
    title: '销售趋势分析',
    description: '本月销售较上月增长12%，主要来自新客户',
    icon: 'TrendCharts'
  },
  {
    id: 'insight-2',
    title: '客户行为洞察',
    description: '客户张三的购买频率较高，建议重点维护',
    icon: 'User'
  }
])

// AI能力
const aiCapabilities = ref([
  { id: 'cap-1', name: '数据分析', icon: 'DataBoard' },
  { id: 'cap-2', name: '预测分析', icon: 'TrendCharts' },
  { id: 'cap-3', name: '智能推荐', icon: 'MagicStick' },
  { id: 'cap-4', name: '流程优化', icon: 'Setting' }
])

// 计算属性
const workBreadcrumbs = computed(() => {
  return [
    { name: '首页', path: '/', icon: 'HomeFilled' },
    { name: '智能导航', path: '/smart-nav', icon: 'Grid' },
    { name: currentContext.value.title, path: '/context', icon: 'MagicStick' }
  ]
})

// 方法
const handleSmartSearch = () => {
  if (!smartSearchQuery.value.trim()) {
    searchSuggestions.value = []
    return
  }
  
  // 模拟智能搜索
  searchSuggestions.value = [
    {
      id: 'sug-1',
      title: '销售订单管理',
      description: '处理销售订单的完整流程',
      icon: 'Document',
      badge: 'HOT',
      badgeType: 'danger'
    },
    {
      id: 'sug-2',
      title: '客户信息查询',
      description: '查询和管理客户信息',
      icon: 'User',
      badge: '',
      badgeType: ''
    }
  ]
}

const hideSearchSuggestions = () => {
  setTimeout(() => {
    showSearchSuggestions.value = false
  }, 200)
}

const selectSuggestion = (suggestion) => {
  console.log('选择搜索建议:', suggestion)
  showSearchSuggestions.value = false
  smartSearchQuery.value = ''
}

const toggleVoiceSearch = () => {
  isVoiceSearching.value = !isVoiceSearching.value
  if (isVoiceSearching.value) {
    ElMessage.info('语音搜索已启动')
  } else {
    ElMessage.info('语音搜索已关闭')
  }
}

const selectRecommendation = (recommendation) => {
  ElMessage.success(`已选择推荐: ${recommendation.title}`)
}

const openFunction = (func) => {
  console.log('打开功能:', func)
}

const improveRecommendations = () => {
  ElMessage.success('正在优化推荐算法...')
  learningStats.value.improvements++
}

const selectCard = (card) => {
  activeCard.value = card.id
  ElMessage.info(`已选择: ${card.title}`)
}

const openCard = (card) => {
  console.log('打开卡片:', card)
}

const bookmarkCard = (card) => {
  ElMessage.success(`已收藏: ${card.title}`)
}

const toggleFlow = (flow) => {
  flow.active = !flow.active
  ElMessage.info(`${flow.title} ${flow.active ? '已激活' : '已停用'}`)
}

const toggleContextPanel = () => {
  isContextPanelCollapsed.value = !isContextPanelCollapsed.value
}

const toggleAIPanel = () => {
  isAIPanelCollapsed.value = !isAIPanelCollapsed.value
}

const refreshWorkArea = () => {
  ElMessage.success('工作区已刷新')
}

const toggleContextMode = () => {
  contextMode.value = contextMode.value === 'smart' ? 'traditional' : 'smart'
  ElMessage.info(`已切换到${contextMode.value === 'smart' ? '智能' : '传统'}模式`)
}

const sendMessage = () => {
  if (!chatInput.value.trim()) return
  
  // 添加用户消息
  aiMessages.value.push({
    id: Date.now(),
    type: 'user',
    text: chatInput.value,
    time: '刚刚'
  })
  
  const userMessage = chatInput.value
  chatInput.value = ''
  
  // 滚动到底部
  scrollToBottom()
  
  // 模拟AI响应
  setTimeout(() => {
    aiMessages.value.push({
      id: Date.now() + 1,
      type: 'assistant',
      text: `我理解您的需求："${userMessage}"。让我为您分析并提供建议。`,
      time: '刚刚'
    })
    scrollToBottom()
  }, 1000)
}

const scrollToBottom = () => {
  nextTick(() => {
    if (chatMessagesRef.value) {
      chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight
    }
  })
}

const applySuggestion = (suggestion) => {
  ElMessage.success(`已应用建议: ${suggestion.text}`)
}

const toggleAIAssistant = () => {
  showAIAssistant.value = !showAIAssistant.value
}

const closeAIAssistant = () => {
  showAIAssistant.value = false
}

const askAIQuestion = () => {
  ElMessage.info('AI问答功能')
}

const getAIAnalysis = () => {
  ElMessage.info('AI分析功能')
}

const requestAIOptimization = () => {
  ElMessage.info('AI优化功能')
}

const toggleNotifications = () => {
  ElMessage.info('通知功能')
}

const toggleUserMenu = () => {
  ElMessage.info('用户菜单')
}

// 生命周期
onMounted(() => {
  // 初始化智能推荐
  ElMessage.success('智能导航系统已启动')
})
</script>

<style scoped>
.context-aware-nav-system {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部智能导航 */
.smart-header {
  height: 70px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

.smart-search {
  flex: 1;
  max-width: 600px;
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.suggestion-item:hover {
  background: #f5f7fa;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.suggestion-desc {
  font-size: 12px;
  color: #606266;
}

.suggestion-badge {
  margin-left: auto;
}

.voice-active {
  color: #f56c6c;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧上下文面板 */
.context-panel {
  width: 320px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.context-panel.collapsed {
  width: 0;
  border-right: none;
}

.panel-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.current-context,
.smart-recommendations,
.related-functions,
.learning-mode {
  margin-bottom: 24px;
}

.current-context h4,
.smart-recommendations h4,
.related-functions h4,
.learning-mode h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.context-info {
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
}

.context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 8px;
}

.context-desc {
  font-size: 12px;
  color: #606266;
}

.recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recommendation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.recommendation-item:hover {
  background: #f5f7fa;
  border-color: #409eff;
}

.recommendation-item.high-priority {
  border-color: #f56c6c;
  background: #fef0f0;
}

.recommendation-icon {
  width: 32px;
  height: 32px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.recommendation-content {
  flex: 1;
}

.recommendation-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.recommendation-desc {
  font-size: 12px;
  color: #606266;
  margin-bottom: 4px;
}

.recommendation-reason {
  font-size: 11px;
  color: #909399;
}

.recommendation-badge {
  margin-left: auto;
}

.function-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.function-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.function-item:hover {
  background: #f5f7fa;
}

.function-badge {
  margin-left: auto;
}

.learning-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat-item {
  text-align: center;
  padding: 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 10px;
  color: #909399;
}

/* 中间工作区域 */
.work-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.work-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
}

.work-breadcrumb {
  display: flex;
  align-items: center;
}

.work-actions {
  display: flex;
  gap: 8px;
}

.work-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
}

/* 智能工作台 */
.smart-workspace {
  background: white;
  border-radius: 8px;
  padding: 24px;
}

.context-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.context-card {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.context-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.context-card.active {
  border-color: #409eff;
  background: #ecf5ff;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.card-content p {
  margin: 0 0 12px 0;
  color: #606266;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.context-card:hover .card-actions {
  opacity: 1;
}

.data-flow {
  margin-bottom: 32px;
}

.data-flow h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.flow-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flow-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.flow-item:hover {
  background: #f5f7fa;
}

.flow-item.active {
  background: #ecf5ff;
  border-color: #409eff;
}

.flow-icon {
  width: 32px;
  height: 32px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.flow-content {
  flex: 1;
}

.flow-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.flow-status {
  font-size: 12px;
  color: #606266;
}

.flow-indicator {
  color: #67c23a;
}

.predictive-analysis {
  margin-bottom: 0;
}

.predictive-analysis h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.analysis-card {
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.analysis-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
}

.analysis-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.analysis-value {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

.analysis-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.analysis-trend.positive {
  color: #67c23a;
}

.analysis-trend.negative {
  color: #f56c6c;
}

.analysis-prediction {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #909399;
}

.prediction-label {
  font-weight: 600;
}

.prediction-value {
  color: #409eff;
}

/* 右侧AI助手面板 */
.ai-panel {
  width: 350px;
  background: white;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.ai-panel.collapsed {
  width: 0;
  border-left: none;
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.ai-chat,
.ai-suggestions,
.smart-insights {
  margin-bottom: 24px;
}

.ai-chat h4,
.ai-suggestions h4,
.smart-insights h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.chat-messages {
  height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px;
}

.chat-message {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chat-message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 24px;
  height: 24px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 12px;
  flex-shrink: 0;
}

.message-content {
  max-width: 70%;
}

.chat-message.user .message-content {
  text-align: right;
}

.message-text {
  background: #f5f7fa;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.chat-message.user .message-text {
  background: #409eff;
  color: white;
}

.message-time {
  font-size: 10px;
  color: #909399;
  margin-top: 4px;
}

.chat-input {
  display: flex;
  gap: 8px;
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.suggestion-item:hover {
  background: #f5f7fa;
}

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: #fafafa;
}

.insight-icon {
  width: 24px;
  height: 24px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 12px;
  flex-shrink: 0;
}

.insight-content {
  flex: 1;
}

.insight-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.insight-desc {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

/* AI助手弹窗 */
.ai-assistant-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.modal-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-content {
  padding: 20px;
}

.ai-capabilities {
  margin-bottom: 20px;
}

.ai-capabilities h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.capability-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.capability-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 6px;
  font-size: 13px;
}

.ai-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* 动画 */
.suggestions-slide-enter-active,
.suggestions-slide-leave-active {
  transition: all 0.2s ease;
}

.suggestions-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.suggestions-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.ai-slide-enter-active,
.ai-slide-leave-active {
  transition: all 0.3s ease;
}

.ai-slide-enter-from {
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
}

.ai-slide-leave-to {
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
}

/* 响应式 */
@media (max-width: 1200px) {
  .ai-panel {
    width: 300px;
  }
  
  .context-panel {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .smart-search {
    display: none;
  }
  
  .context-panel,
  .ai-panel {
    position: fixed;
    top: 70px;
    height: calc(100vh - 70px);
    z-index: 999;
  }
  
  .context-panel {
    left: 0;
  }
  
  .ai-panel {
    right: 0;
  }
  
  .context-cards {
    grid-template-columns: 1fr;
  }
  
  .analysis-grid {
    grid-template-columns: 1fr;
  }
}
</style>
